<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="KeyParts.isShow">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>重点关系维护</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="modal-row overflow" style="height: 400px;">
            <div id="role-select" class="ztree" style="display: none"></div>
            <div class="table-ctrl-body">
              <div class="table-ctrl">

                <div class="table-header">
                  <table class="table-default">
                    <thead>
                    <tr>
                      <th v-for="ths in tableHeader">
                        {{ths.value}}
                      </th>
                    </tr>
                    </thead>
                  </table>
                </div>

                <div class="table-overflowX">
                  <table class="table-default">
                    <tbody>
                    <tr
                      v-for="(trs,index) in tableBody"
                      @click="selectRow(trs,index)"
                      :class="{active:activeIndex === index || keyPartsItemId === trs.id}"
                    >
                      <td
                        v-for="tds in tableHeader"
                        :title="trs[tds.key]"
                      >
                        {{ trs[tds.key] }}
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">关闭</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    export default {
        props:["KeyParts"],
        name: "KeyParts",
        data(){
          return{
            activeIndex:-1,
            tableHeader:[
              {"key":"name","value":"名称"},
              {"key":"description","value":"描述"},
              {"key":"pointName","value":"点位名称"},
              {"key":"placetype","value":"类型"},
              {"key":"code","value":"编码"}
            ],
            tableBody:[],
            placeid:"",
            selectId:"",
            keyPartsItemId:"",
            typeAjax:{}
          }
        },
        watch:{
          KeyParts:{
            handler(v1){
              if( v1.isShow ){//弹出窗口
                //获取重点部位列表
                this.selectId = v1.selectId;
                this.typeAjax = v1.typeAjax;
               // this.getKeyPartsList();
                this.getKeyPartsItem();

              }
            },
            deep:true
          }
        },
        methods:{
          //重点部位关系绑定
          subBtn(){
            //POST /resource/relation/addCameraTResPlaceIMRelation/{relationid}/{placeid}
            //console.log(this.placeid);
            //console.log(this.selectId);
            if( this.keyPartsItem ){
              this.s_alert("该设备已经绑定其他重要部位关系，需要先删除重点部位关系才能重新绑定！");
              return false;
            }
            if( this.verifyForm.isNull(this.placeid) ){
              this.s_alert("请选择重点部位！");
              return false;
            }
            this.$axios.post(this.DotCtrl+this.typeAjax.add+ this.selectId +"/"+ this.placeid +"")
              .then(data=>{
                this.s_alert("添加成功！");
                //console.log(data);
                this.close();
              })
              .catch(err=>{
                this.s_alert("添加失败！" + err.response.data.errorMsg);
              })
          },
          //获取已经添加的重点部位
          getKeyPartsItem(){
            //POST /resource/relation/addCameraTResPlaceIMRelation/{relationid}
            this.$axios.post(this.DotCtrl+this.typeAjax.get+ this.selectId +"")
              .then(data=>{
                //console.log(data);
                this.keyPartsItem = data.data;
                this.getKeyPartsList();
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //获取重点部位列表
          getKeyPartsList(){
            this.$axios.get(this.DotCtrl+"/resource/placeInfoCRUD/queryAllIM")
              .then(data=>{
                //console.log(data);
                if( this.keyPartsItem.placeid ){
                  this.keyPartsItemId = this.keyPartsItem.placeid;
                }
                this.tableBody = data.data;
                ////console.log(this.keyPartsItemId);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //选择行
          selectRow(obj,index){
            if( this.keyPartsItem ){
              this.s_alert("该设备已经绑定其他重要部位关系，需要先删除重点部位关系才能重新绑定！");
              return false;
            }
            if( this.keyPartsItemId === "" ){
              //console.log(obj);
              this.placeid = obj.id; //重点区域id
              this.activeIndex = index;
            }
          },
          //关闭弹窗
          close(){
            this.activeIndex = -1;
            this.placeid = "";
            this.keyPartsItemId = "";
            this.$emit("keyPartsClose");
          }
        }
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
